<template>
	<view class="body">
		<view class="header white d-s-c">
			<view class="avatar d-c-c br30 mr30">
				<i class="iconfont icon-wode f48"></i>
			</view>
			<view class="user-info">
				<view class="fb f36 mb10">{{ user.name || "微信用户" }}</view>
				<view class="f28">ID: {{ user.id || "0" }}</view>
			</view>
		</view>
		<view class="container pt40 p30">
			<view class="bg-white section br32 mb40">
				<view class="section-header d-b-c pt35 pb35 pl40 pr40">
					<view class="section-title f34 fb pl20">个人信息</view>
					<view
						class="action-btn f28 pt10 pb10 pl25 pr25 br32 fb"
						@click="jump('/pages/setting/edit')">
						修改
					</view>
				</view>
				<view class="p40 fb">
					<view class="info-row pt30 pb30 d-s-c">
						<view class="info-label f30 ww30">姓名</view>
						<view class="info-value flex-1 vertical">
							{{ user.name || "微信用户" }}
						</view>
					</view>
					<view class="info-row pt30 pb30 d-s-c">
						<view class="info-label f30 ww30">手机号</view>
						<view class="info-value flex-1 vertical">
							{{ user.phone || "" }}
						</view>
					</view>
					<view class="info-row pt30 pb30 d-s-c">
						<view class="info-label f30 ww30">家庭住址</view>
						<view class="info-value flex-1 vertical">
							{{ user.address || "" }}
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white section br32 mb40">
				<view class="section-header d-b-c pt35 pb35 pl40 pr40 fb">
					<view class="section-title f34 pl20">子女信息</view>
					<view
						class="action-btn f28 pt10 pb10 pl25 pr25 br32"
						@click="jump('/pages/child/child')">
						管理
					</view>
				</view>
				<view class="p40">
					<child :childList="childList"></child>
				</view>
			</view>
			<view class="bg-white section br32 mb40">
				<view class="section-header d-b-c pt35 pb35 pl40 pr40 fb">
					<view class="section-title f34 pl20">课程信息</view>
					<view
						class="action-btn f28 pt10 pb10 pl25 pr25 br32"
						@click="jump('/pages/day/day')">
						报读
					</view>
				</view>
				<view class="p40">
					<view class="d-f">
						<view class="program-image d-c-c white br28 mr35">
							<i class="iconfont icon-maobi f78"></i>
						</view>
						<view class="program-info">
							<view class="program-title f34 fb mb15 vertical">
								{{ company.courseName }}
							</view>
							<view class="program-date f28 mb30 d-b-s d-c">
								<view class="d-s-c">
									<i class="iconfont icon-rili mr15"></i>
									<text>2025-07-08 至 2025-08-31</text>
								</view>
								<view
									class="date-badge mt10 pt10 pb10 pl20 pr20 br24 f24">
									{{ day }}天倒计时
								</view>
							</view>
							<view class="program-price d-b-c fb f40">
								<text>¥{{ company.userPay }}/天</text>
								<view
									class="action-btn f28 fb pt10 pb10 pl25 pr25 br32"
									@click="jump('/pages/day/day')">
									报读
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white section br32 mb40">
				<view class="section-header d-b-c pt35 pb35 pl40 pr40 fb">
					<view class="section-title f34 pl20">最近订单</view>
					<view
						class="action-btn f28 pt10 pb10 pl25 pr25 br32"
						@click="jump('/pages/order/order')">
						查看全部
					</view>
				</view>
				<view class="p40" v-if="order">
					<orderItem :item="order"></orderItem>
				</view>
				<view class="pb40" v-else>
					<u-empty mode="list" marginTop="20"></u-empty>
				</view>
			</view>
		</view>

		<tabbar :active="0"></tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			company: {},
			childList: [],
			order: {},
			user: {},
		};
	},
	// onBackPress() {
	// 	// 在这里处理返回事件
	// 	this.getUser(); // 执行需要刷新的操
	// },
	onLoad() {
		this.getList();
	},
	onShow() {
		this.getUser();
		// console.log(this.day);
	},
	computed: {
		day() {
			// 将字符串日期转换为日期对象
			const targetDate = new Date("2025-08-31");
			// 获取今天的日期
			const today = new Date();
			// 将日期转换为毫秒数
			const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
			// 计算两个日期之间的差异（以毫秒为单位）
			const diff = targetDate - today;
			// 将差异转换为天数
			return Math.ceil(diff / oneDay);
		},
	},
	methods: {
		async getUser() {
			const res = await this.$request({
				url: this.$api.login,
				data: {
					openid: uni.getStorageSync("openid"),
				},
			});
			console.log(res);
			if (res.code == 0) {
				this.user = res.data;
				uni.setStorageSync("user", res.data);
				this.getList2();
				this.getList3();
			} else if (res.code == 1) {
				uni.removeStorageSync("user");
				this.jump("/pages/setting/edit");
			}
		},
		async getList() {
			const res = await this.$request({
				url: this.$api.courseList,
			});
			this.company = res.list[0];
		},
		async getList2() {
			const res = await this.$request({
				url: this.$api.parent,
				data: {
					parentId: uni.getStorageSync("user").id || false,
				},
			});
			this.childList = res;
		},
		async getList3() {
			const res = await this.$request({
				url: this.$api.getListAll,
				data: {
					parentId: uni.getStorageSync("user").id || false,
				},
			});
			this.order = res[0];
		},
	},
};
</script>

<style scoped lang="scss">
.status-paid {
	color: #27ae60;
}

.program-price {
	font-weight: bold;
	color: #e74c3c;

	.action-btn {
		color: #3498db;
		background: rgba(52, 152, 219, 0.1);
	}
}

.program-date {
	.iconfont {
		color: #3498db;
	}

	.date-badge {
		display: inline-block;
		background: #fff8e1;
		color: #f39c12;
	}
}

.program-image {
	width: 180rpx;
	height: 180rpx;
	background: linear-gradient(135deg, #74b9ff, #0984e3);
	font-size: 34px;
	flex-shrink: 0;
	box-shadow: 0 5px 15px rgba(116, 185, 255, 0.3);
}

.program-title {
	color: #2c3e50;
}

.program-date {
	color: #7f8c8d;
}

.section {
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
	transition: transform 0.3s, box-shadow 0.3s;

	.section-header {
		border-bottom: 1px solid #f0f5ff;
		background: linear-gradient(to right, #f8faff, #ffffff);

		.section-title {
			color: #2c3e50;
			position: relative;

			&:before {
				content: "";
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 8rpx;
				height: 32rpx;
				background: #3498db;
				border-radius: 4rpx;
			}
		}

		.action-btn {
			color: #3498db;
			background: rgba(52, 152, 219, 0.1);
			cursor: pointer;
		}
	}

	.info-row {
		border-bottom: 1rpx solid #f0f5ff;

		&:last-child {
			border-bottom: none;
		}

		.info-label {
			color: #7f8c8d;
		}

		.info-value {
			color: #2c3e50;
		}
	}
}

.header {
	background: linear-gradient(135deg, #3498db, #2ecc71);
	padding: 40rpx 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	position: relative;

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #fff;
		color: #3498db;
		border: 2px solid rgba(255, 255, 255, 0.5);
	}
}
</style>
